<template>
  <div class="order-manage-container">
    <div class="addOrderBox"></div>
    <div class="operate-bar">
      <ul>
        <li>
          <el-select v-model="statusAll" placeholder="所有状态" class="statusAll" clearable @change="getTableData">
            <el-option
              v-for="item in typeOptions"
              :key="item.value + 1"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="order_type" placeholder="所有类型" class="order_type" clearable @change="getTableData">
            <el-option
              v-for="item in statusOptions"
              :key="item.value + 2"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-input
            placeholder="输入工单编号查找"
            class="orderNum"
            v-model="order_no"
            clearable
            v-on:keyup.enter.native="getTableData"
            @clear="getTableData"
          >
          </el-input>
          <el-button type="primary" @click="addRepairOrder" class="addOrder" v-has="'maintenanceApp:workBench:add'"
            >创建工单</el-button
          >
          <el-checkbox class="hideOrder" v-model="hiddenOrder" @change="getTableData">隐藏已完成工单</el-checkbox>
        </li>
      </ul>
    </div>
    <CommonTable
      :options="tableConfig.options"
      :columns="tableConfig.columns"
      :actions="tableConfig.actions"
      :data="tableData"
      @handleSortChange="handleSortChange"
      class="tableBox"
    ></CommonTable>
    <CommonPagination :options="paginationOptions" :dataSource="getTableData" class="pagedown"></CommonPagination>
    <el-dialog title="创建工单" :visible.sync="dialogAddOrder" width="600px" :modal-append-to-body="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="工单类型" prop="deviceName">
          <el-select v-model="ruleForm.orderType" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in statusOptions" :key="item.value + 3" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号" prop="selectDevice">
          <el-select
            v-model="selectDevice"
            filterable
            placeholder="请选择"
            @change="changeDevice"
            class="select"
            style="width: 100%"
          >
            <el-option v-for="(item, index) in numOptions" :key="index" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障描述" prop="FaultDescription">
          <el-input v-model="ruleForm.FaultDescription" placeholder="请输入内容" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="上报供应商" v-has="'maintenanceApp:workBench:report'">
          <el-switch v-model="ruleForm.isReport"></el-switch>
          <span class="isReportDescribe">上报维修工单给供应商，由供应商安排维修人员进行处理</span>
        </el-form-item>

        <el-form-item label="现场图片" prop="modelName">
          <div :class="{ noneBtn: fiveMore, showBtn: fiveLess }">
            <el-upload
              action
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-change="handleBeforeUpload"
              :auto-upload="false"
              :file-list="imgList"
              :limit="5"
            >
              <!-- :http-request="httpRequest" -->
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogImg" :modal="false" width="30%">
              <img width="100%" height="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
            <p class="sc-color-gray">支持JPG\PNG\GIF格式，文件不大于2M，最多不能超过5张</p>
          </div>
        </el-form-item>
        <el-form-item label="现场联系人" prop="contacts">
          <el-input v-model="ruleForm.contacts" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contacts_tel">
          <el-input v-model="ruleForm.contacts_tel" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="设备地址" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="合同编号" prop="project_contract">
          <el-input v-model="ruleForm.project_contract" placeholder="请输入内容" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="处理工单"
      :visible.sync="dialogHandleOrder"
      width="800px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      append-to-body
      v-if="dialogHandleOrder"
    >
      <el-dialog
        width="600px"
        title="选择配件"
        :visible.sync="diglogSelectACC"
        append-to-body
        :modal-append-to-body="true"
        class="diglogSelectACC"
      >
        <el-table
          ref="multipleTable"
          :data="partsTableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          height="46vh"
          class="scroll-bar"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="配件名称" prop="name"> </el-table-column>
          <el-table-column prop="number" label="物料编号"> </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSelectionDetermine">确 定</el-button>
        </span>
      </el-dialog>
      <el-form ref="handleForm" :model="handleForm" label-width="80px" :rules="handleRules">
        <el-form-item class="short" label="工单编号">
          <el-input v-model="handleForm.Num" disabled></el-input>
        </el-form-item>
        <el-form-item class="short" label="工单类型">
          <el-input :value="handleForm.type === 1 ? '维修工单' : '保养工单'" disabled></el-input>
        </el-form-item>
        <el-form-item class="short" label="设备编号">
          <el-input v-model="handleForm.deviceNum" disabled></el-input>
        </el-form-item>
        <el-form-item class="short" label="设备名称">
          <el-input :value="handleForm.deviceName" disabled></el-input>
        </el-form-item>

        <el-form-item label="处理说明" prop="explain">
          <el-input
            v-model="handleForm.explain"
            placeholder="请输入内容"
            type="textarea"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="添加配件">
          <el-button type="primary" plain @click="getAccessories(handleForm.device_model_id)">选择配件</el-button>
          <el-table
            :data="multipleSelection"
            height="250"
            border
            style="width: 100%; margin-top: 20px"
            v-if="!multipleSelection.length == []"
          >
            <el-table-column prop="name" label="配件名称" width="180"> </el-table-column>
            <el-table-column prop="number" label="物料编号" width="180"> </el-table-column>
            <el-table-column label="数量" width="180">
              <template slot-scope="scope">
                <el-input-number size="small" :min="1" v-model="scope.row.num"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button class="deleteBtm" @click="deleteClick(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="接单成功" :visible.sync="dialogsucce" width="400px" top="20vh" :modal-append-to-body="false">
      工单（{{ receivingNum }}）已接单成功，请及时进行处理
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogsucce = false">取 消</el-button>
        <el-button type="primary" @click="submitOrder">处理工单</el-button>
      </span>
    </el-dialog>
    <details-dialog
      :show.sync="dialogDetails"
      :detailData.sync="detailData"
      :workB="1"
      :TEMPdata.sync="OrderDetails"
      @sonClick="sonClick"
      v-if="dialogDetails"
    ></details-dialog>
    <el-dialog
      title="删除工单"
      :visible.sync="dialogDeleteOrder"
      width="400px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div style="display: inline-block">
        <i class="el-message__icon el-icon-warning warningIcon"></i>
      </div>

      <div class="warningTitle">
        <span
          >确定删除工单(<span style="color: #3378ff">{{ clickRow.order_no }}</span
          >)</span
        >
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitDeleteOrder">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CommonTable from '@/components/CommonTable.vue';
import CommonPagination from '@/components/CommonPagination.vue';
import detailsDialog from '@/components/CommonDetailsDialog.vue';
import {
  getOrderListByEngineer,
  receiveOrder,
  DeleteOrder,
  getOrderDetails,
  completeOrder,
  createOrder,
  getDeviceList,
  getModelAccessories
} from '@/api/orderManage';

export default {
  name: 'workOrderManage',
  components: {
    CommonTable,
    CommonPagination,
    detailsDialog
  },
  data() {
    return {
      dialogImg: false, //图片预览弹窗
      statusAll: '', //筛选所有状态
      order_type: '', //筛选所有类型
      order_no: '', //筛选工单编号
      tableData: [], //表格数据
      partsTableData: [], //配件表格
      newStatus: '', //最新的状态
      handleForm: { Num: '', type: '', deviceNum: '', deviceName: '', explain: '', add: '', device_model_id: '' }, //处理表单
      handleRules: { explain: [{ required: true, message: '请输入处理说明', trigger: 'blur' }] },
      determine: [], //勾选值
      dialogDeleteOrder: false,
      statusOptions: [
        { label: '维修工单', value: 1 },
        { label: '保养工单', value: 2 }
      ],
      typeOptions: [
        // { label: '待接单', value: 1 },
        { label: '待接单', value: 2 },
        { label: '已接单', value: 3 },
        { label: '已完成', value: 4 },
        { label: '已取消', value: 5 }
      ],
      //新增维修工单参数
      ruleForm: {
        deviceName: '',
        orderType: '',
        deviceNum: '',
        description: '',
        isReport: true,
        contacts: '',
        contacts_tel: '',
        address: ''
      },
      //验证规则
      rules: {
        orderType: [{ required: true, message: '请选择工单类型', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        deviceNum: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入现场联系人', trigger: 'blur' }],
        contacts_tel: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: '联系电话输入错误'
          }
        ]
      },
      //分页配置
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      },
      dialogAddOrder: false, //新增维修工单弹窗
      dialogImageUrl: '', //预览图片地址
      dialogVisible: false,
      disabled: false,
      dialogHandleOrder: false, //处理工单弹窗
      dialogsucce: false, //接单成功
      diglogSelectACC: false, //选择配件
      receivingNum: '', //接单的工单号
      multipleSelection: [], //配件数据
      handleOrderId: '',
      dialogDetails: false, //详情弹窗
      detailData: {}, //详情的数据
      OrderDetails: {},
      clickRow: {}, //点击的行数据
      hiddenOrder: false,
      imgList: [], //上传图片列表
      fiveMore: false, //控制图片按钮
      fiveLess: true, //控制图片按钮
      selectDevice: '', //选中的设备
      numOptions: [] //设备编号列表
    };
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          height: '550px',
          hasSelection: true,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0', 'white-space': 'nowrap', overflow: 'hidden', 'text-overflow': 'ellipsis' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'order_no',
            label: '工单编号',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'typeText',
            label: '工单类型',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'device_number',
            label: '设备编号',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'description',
            label: '故障/保养描述',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'city',
            label: '城市',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'contacts',
            label: '联系人',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'contacts_tel',
            label: '联系电话',
            width: '',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'updated_time',
            label: '更新时间',
            width: '180',
            hasSort: 'custom',
            isShow: true
          },
          {
            prop: 'statusText',
            label: '状态',
            width: '',
            hasSort: 'custom',
            isShow: true
          }
        ],
        // table - actions
        actions: {
          title: '操作',
          width: 160,
          links: [
            {
              label: '详情',
              type: 'primary',
              permission: 'maintenanceApp:workBench:detail',
              handleLinkClick: row => {
                this.dialogDetails = true;
                this.detailData = row;
                this.clickRow = row;
                getOrderDetails(row.id).then(res => {
                  this.OrderDetails = res.data;
                });
              },
              handleLinkShow: row => {
                return true;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '接单',
              type: 'primary',
              permission: 'maintenanceApp:workBench:orders',
              handleLinkClick: row => {
                this.receivingNum = row.order_no;
                this.handleOrderId = row.id;
                this.handleForm.Num = row.order_no;
                this.handleForm.type = row.order_type;
                this.handleForm.deviceNum = row.device_number;
                this.handleForm.deviceName = row.device_name;
                this.handleForm.device_model_id = row.device_model_id;
                receiveOrder({ id: row.id }).then(res => {
                  if (res.message === '204') {
                    this.$message({
                      message: '操作成功',
                      type: 'success'
                    });
                    this.dialogsucce = true;
                    this.getTableData();
                  }
                });
              },
              handleLinkShow: row => {
                if (row.statusText === '待接单') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '处理工单',
              type: 'primary',
              permission: 'maintenanceApp:workBench:handle',
              handleLinkClick: row => {
                this.dialogHandleOrder = true;
                this.handleOrderId = row.id;
                this.handleForm.explain = '';
                this.handleForm.Num = row.order_no;
                this.handleForm.type = row.order_type;
                this.handleForm.deviceNum = row.device_number;
                this.handleForm.deviceName = row.device_name;
                this.handleForm.device_model_id = row.device_model_id;
                //获取配件信息
                getModelAccessories({ id: row.device_model_id }).then(res => {
                  res.data.forEach(res => {
                    res.num = 1;
                  });
                  this.partsTableData = res.data;
                });
              },
              handleLinkShow: row => {
                if (row.statusText === '已接单') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },

            {
              label: '删除',
              type: 'danger',
              color: '#F56C6C',
              permission: 'maintenanceApp:workBench:delete',
              handleLinkClick: row => {
                this.dialogDeleteOrder = true;
                this.clickRow = row;
              },
              handleLinkShow: row => {
                if (row.statusText === '已取消') {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            }
          ]
        }
      };
    }
  },
  created() {},
  mounted() {
    this.getTableData();
    //获取设备列表
    getDeviceList().then(res => {
      this.deviceList = res.data.list;
      this.numOptions = [];
      res.data.list.forEach(element => {
        let temp = {};
        temp.label = element.number + '/' + element.name;
        temp.value = element.id;
        this.numOptions.push(temp);
      });
    });

    this.$nextTick(() => {
      this.tableHeightResize();

      // 监听窗口大小变化
      window.onresize = () => {
        this.tableHeightResize();
      };

      // 监听菜单栏的展开收起
      let sidebarEl = document.querySelector('.fold-icon');
      if (sidebarEl) {
        sidebarEl.addEventListener('click', () => {
          this.tableHeightResize();
        });
      }
    });
  },
  methods: {
    // 表格高度处理（示例）- 根据实际开发页面做相关调整即可
    tableHeightResize() {
      // 主内容区高度
      let mainContentEl = document.querySelector('.main');
      let mainContentHeight = mainContentEl ? mainContentEl.getBoundingClientRect().height : 0;

      /*
        表格高度（获取main元素的高度，然后减去其它元素的高度）
        18：页面标题
        76：操作栏
        51：表头
        72：页码
      */
      this.tableMaxHeight = mainContentHeight - 18 - 76 - 51 - 72;

      // 主内容区宽度
      let winInnerWidth = window.innerWidth;

      // 菜单栏宽度
      let sidebarWidth = document.querySelector('.sidebar-container').getBoundingClientRect().width;

      // 主内容区宽度
      let mainContentWidth = winInnerWidth - sidebarWidth - 30;
      mainContentWidth = mainContentWidth < 1030 ? 1030 : mainContentWidth;

      // 表格宽度
      let tableEl = document.querySelector('.el-table');
      tableEl.style.width = mainContentWidth - 40 + 'px';
    },
    sonClick(res) {
      // if (res === 'cancel') this.dialogCancelOrder = true;
      // if (res === 'modify') this.dialogModify = true;
      // if (res === 'delete') this.dialogDeleteOrder = true;
      // if (res === 'assign') this.dialogDistribute = true;
    },
    //处理工单
    submitOrder() {
      this.dialogHandleOrder = true;
      this.dialogsucce = false;

      getModelAccessories({ id: this.handleForm.device_model_id }).then(res => {
        res.data.forEach(res => {
          res.num = 1;
        });
        this.partsTableData = res.data;
      });
    },
    submitDeleteOrder() {
      DeleteOrder({ id: this.clickRow.id }).then(res => {
        if (res.message === '204') {
          this.$message({
            message: '操作成功',
            type: 'success'
          });
          this.dialogDeleteOrder = false;
          this.dialogDetails = false;
          this.getTableData();
        }
      });
    },
    //图片删除
    handleRemove(file, fileList) {
      console.log(file);

      // this.imgList.forEach(res => {
      //   this.imgList.splice(
      //     this.imgList.findIndex(item => item.uid === file.uid),
      //     1
      //   );
      // });
      this.imgList = fileList;
      if (this.imgList.length >= 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImg = true;
    },
    //切换标签页
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //新增维修工单
    addRepairOrder() {
      this.dialogAddOrder = true;
    },
    //勾选配件
    handleSelectionChange(val) {
      this.determine = val;
    },
    //确定勾选
    handleSelectionDetermine() {
      this.multipleSelection = this.determine;
      this.diglogSelectACC = false;
    },
    //选中设备
    changeDevice() {
      this.deviceList.forEach(res => {
        if (res.id === this.selectDevice) {
          this.ruleForm.address = res.countries + res.province + res.city + res.address;
          this.ruleForm.deviceName = res.name;
        }
      });
    },
    handleBeforeUpload(file) {
      let that = this;
      if (this.imgList.length >= 4) {
        this.fiveMore = true;
        this.fiveLess = false;
      } else {
        this.fiveMore = false;
        this.fiveLess = true;
      }
      if (
        !(
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif' ||
          file.raw.type === 'image/jpg' ||
          file.raw.type === 'image/jpeg'
        )
      ) {
        this.$message.error('上传文件类型必须是图片!');
      } else {
        let reader = new FileReader();
        reader.onload = function (e) {
          that.imgList.push({ url: reader.result });
        };
        reader.readAsDataURL(file.raw);
      }
    },
    // 获取表格数据
    getTableData() {
      let params = {
        page: this.paginationOptions.currentPage, //当前页
        page_size: this.paginationOptions.pageSize, //每页显示数据条数
        order_no: this.order_no,
        status: this.statusAll,
        order_type: this.order_type,
        extend: this.hiddenOrder ? 'complete' : ''
      };
      getOrderListByEngineer(params).then(res => {
        this.tableData = res.data.list;
        this.paginationOptions.total = res.data.total;
        res.data.list.forEach(element => {
          let arr = ['', '待接单', '已接单', '已完成', '已取消'];
          element.statusText = arr[element.status - 1];
          element.order_type === 1 ? (element.typeText = '维修工单') : (element.typeText = '保养工单');
          let arr2 = ['手动创建', '故障记录或保养计划转换', '上报工单'];
          element.source = arr2[element.source - 1];
        });
        // if (this.hiddenOrder) {
        //   this.tableData.splice(
        //     this.tableData.findIndex(item => item.status === '已完成'),
        //     1
        //   );
        // }
      });
    },
    // 字段排序
    handleSortChange(column, prop, order) {
      console.log('handleSortChange---', column, prop, order);
      let prop1 = column.prop;
      let order1 = column.order;
      if (order1 === 'ascending') {
        // console.log(prop1, order1, 1);
        this.$nextTick(function () {
          this.tableData.sort(function (a, b) {
            // console.log(a[prop1], b[prop1], 1);
            return a[prop1].localeCompare(b[prop1], 'zh');
          });
        });
      } else if (order1 === 'descending') {
        this.$nextTick(function () {
          this.tableData.sort(function (a, b) {
            // console.log(a[prop1], b[prop1], 2);
            return b[prop1].localeCompare(a[prop1], 'zh');
          });
        });
      }
    },
    // 页面跳转
    jumpFn() {
      this.$router.push({
        name: 'userChild',
        query: {
          id: 1
        },
        params: {
          name: 'xiaoming'
        }
      });
    },
    //获取配件
    getAccessories(modelId) {
      this.diglogSelectACC = true;
    },
    //提交新增工单
    submitAddOrder() {
      let params = {};
      params.address = this.ruleForm.address;
      params.contacts = this.ruleForm.contacts;
      params.contacts_tel = this.ruleForm.contacts_tel;
      params.customer = JSON.parse(localStorage.getItem('userInfo')).customer_name;
      params.description = this.ruleForm.description;
      params.device_id = this.selectDevice;
      params.device_number = this.selectDevice + '';
      // params.device_name = this.ruleForm.deviceName;
      this.ruleForm.isReport ? (params.is_report = 1) : (params.is_report = 0);
      params.order_type = this.ruleForm.orderType;
      params.project_number = 0;
      params.source = 1;
      params.photos = [];
      if (this.imgList) {
        this.imgList.forEach(res => {
          params.photos.push(res.url);
        });
      }

      console.log(params);
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return;
        createOrder(params).then(res => {
          if (res.message === '200') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.dialogAddOrder = false;
          }
        });
      });
    },
    //处理工单
    submitHandle() {
      let params = {};
      params.processing_result = this.handleForm.explain;
      params.id = this.handleOrderId;
      params.accessory_list = [];
      this.multipleSelection.forEach(item => {
        let temp = {};
        temp.name = item.name;
        temp.id = item.accessoriesId;
        temp.num = item.num;
        temp.number = item.number;
        params.accessory_list.push(temp);
      });
      params.accessory_list = JSON.stringify(params.accessory_list);
      console.log(params);
      this.$refs.handleForm.validate(valid => {
        if (!valid) return;
        completeOrder(params).then(res => {
          if (res.message === '204') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.getTableData();
            this.dialogHandleOrder = false;
          }
        });
      });
    },
    deleteClick(row, index) {
      console.log(row, index, '查看数据');
      this.multipleSelection.splice(index, 1);
    }
  },
  beforeDestroy() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
//弹窗间距
::v-deep .el-dialog__body {
  padding: 20px 20px 25px 20px;
  overflow-y: auto;
  max-height: 580px;
  //滚动样式
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
//表格样式
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.pagedown {
  position: fixed;
  z-index: 999;
  bottom: 15px;
  left: 0;
  right: 30px;
  width: 100% !important;
}

.order-manage-container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  overflow: hidden;
}
.tabsStyle {
  margin-left: 20px;
  margin-top: 36px;
  font-size: 18px;
}
.screenInput {
  width: 200px;
}
.is-top {
  font-size: 18px !important;
}
.addOrderBox {
  display: inline-block;
}
.order_type,
.DateFilters,
.orderNum,
.isReportDescribe {
  margin-left: 10px;
}

.DateFilters {
  display: inline-block;
}
.orderNum {
  width: 300px;
}
.isReportDescribe {
  color: #909399;
  font-size: 13px;
}
.hideOrder {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}
.addOrder {
  float: right;
}
.short {
  width: 350px;
  display: inline-block;
}
.short:nth-child(2),
.short:nth-child(4) {
  margin-left: 26px;
}
::v-deep div[aria-label='选择配件'] > .el-dialog__body {
  height: 50vh;
  overflow-y: hidden;
  padding-top: 0px !important;
}
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.deleteBtm {
  color: #f56c6c;
  cursor: pointer;
  border: 0px;
}
::v-deep .el-upload-list__item.is-ready {
  display: none;
}
.warningIcon {
  color: #e6a23c;
  font-size: 30px;
}
.warningTitle {
  display: inline-block;
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 20px;
}
</style>
